<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../commons/taglibs.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>注册页面</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="device-width,initial-scale=1.0">

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
	rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="${ctx }/javascript/md5.js"></script>

<style type="text/css">
#big {
	width: auto;
	height: auto;
}
</style>
</head>

<body style="font-family:'楷体'; font-size:24px;background: #DADADA;">
	<div id="big" align="center">
		<form class="form-horizontal"
			action="wumimember/memberaction!register" name="registerForm"
			id="registerForm" method="post" role="from">
			<table width="308" height="286" border="0" style="margin-top:80px;">
				<tr>
					<td colspan="2" style="text-align:center;"><span
						style="font-size:26px">用户注册</span>
					</td>
				</tr>
				<tr>
					<td width="92" height="40" style="text-align:right;"><label>昵称</label>
					</td>
					<td width="200"><div class="col-sm-10">
							<input type="text" class="form-control" name="member.nickName"
								id="nickName" placeholder="昵称不可更改">
						</div>
					</td>
				</tr>
				<tr>
					<td height="40" style="text-align:right;"><label><font
							color="#FF0000">*</font>手机号</label>
					</td>
					<td><div class="col-sm-10">
							<input type="text" class="form-control" name="member.mobile"
								id="mobile" placeholder="请输入手机号">
						</div></td>
				</tr>
				<tr>
					<td height="40" style="text-align:right;"><label><font
							color="#FF0000">*</font>密码</label>
					</td>
					<td><div class="col-sm-10">
							<input type="password" class="form-control"
								name="member.password" id="password" placeholder="请输入密码">
						</div></td>
				</tr>
				<tr>
					<td height="44" colspan="2" style="text-align:center;"><div
							id="Message">
							<c:if test="${not empty result && result != '' }">
								<span style="color: red;">${result}</span>
							</c:if>
						</div>
					</td>
				</tr>
				<tr>
					<td height="53" colspan="2" style="text-align:center;">
						<button type="button" class="btn btn-primary" id="regite"
							onclick="verifyRegister();">注册</button>
						<button type="button" class="btn btn-primary" id="back"
							onclick="window.location.href='wumimember/memberaction!memberLogin?member.openid=${member.openid }&member.toUserName=${member.toUserName }'">返回</button>
					</td>
				</tr>
			</table>
		</form>
		
		<div style="width: auto;height: auto;margin-top: 200px;">
			<c:import url="/jsp/commons/footer.jsp"></c:import>
		</div>
	</div>
</body>

<script type="text/javascript">
	String.prototype.trim = function() {
		return this.replace(/(^\s*)|(\s*$)/g, '');
	};
	var loginNameRepeat = false;

	function verifyRegister() {
		var mobile = document.getElementById("mobile").value.trim();
		var password = document.getElementById("password").value.trim();
		mobileReg = /^1[3|4|5|8][0-9]\d{8}$/;
		passwordReg = /^[A-Za-z0-9]{6,15}$/;
		if (loginNameRepeat) {
			return false;
		}
		if (mobile.length == 0) {
			$("#Message").html("<span style='color: red;'>请输入手机号</span>");
			return false;
		} else if (!mobileReg.test(mobile)) {
			$("#Message").html("<span style='color: red;'>手机号码格式错误</span>");
			return false;
		}
		if (password.length == 0) {
			$("#Message").html("<span style='color: red;'>请输入密码</span>");
			return false;
		} else if (!passwordReg.test(password)) {
			$("#Message").html(
					"<span style='color: red;'>密码只能为英文或数字组成的6-15个字符</span>");
			return false;
		}

		document.getElementById("password").value = faultylabs.MD5(password
				.trim());
		registerForm.submit();
	}

	$(document)
			.ready(
					function() {
						$("#nickName")
								.blur(
										function() {
											$("#Message").html("");
											var nickName = $("#nickName").val();
											if (nickName.length != 0) {
												$
														.ajax({
															async : false,
															type : "POST",
															url : "wumimember/memberaction!verifyNickName",
															dataType : "json",
															data : $(
																	"#registerForm")
																	.serialize(),
															error : function(
																	request) {
																alert("Connection error");
															},
															success : function(
																	data) {
																var d = eval("("
																		+ data
																		+ ")");
																if (d.verifyFlag == 0) {
																	$(
																			"#Message")
																			.html(
																					"<span style='color: red;'>"
																							+ d.nickNameTips
																							+ "</span>");
																	loginNameRepeat = true;
																} else if (d.verifyFlag == 1) {
																	$(
																			"#Message")
																			.html(
																					"<span style='color: red;'>"
																							+ d.nickNameTips
																							+ "</span>");
																	loginNameRepeat = true;
																} else {
																	$(
																			"#Message")
																			.html(
																					"");
																	loginNameRepeat = false;
																}
															}
														});
											}
										});

						$("#mobile")
								.blur(
										function() {
											$("#Message").html("");
											var mobile = $("#mobile").val();
											if (mobile.length != 0) {
												$
														.ajax({
															async : false,
															type : "POST",
															url : "wumimember/memberaction!verifyMobile",
															data : $(
																	"#registerForm")
																	.serialize(),
															dataType : "json",
															error : function(
																	request) {
																alert("Connection error");
															},
															success : function(
																	data) {
																var d = eval("("
																		+ data
																		+ ")");
																if (d.verifyFlag == 0) {

																	$(
																			"#Message")
																			.html(
																					"<span style='color: red;'>"
																							+ d.mobileTips
																							+ "</span>");
																	loginNameRepeat = true;
																} else if (d.verifyFlag == 1) {
																	$(
																			"#Message")
																			.html(
																					"<span style='color: red;'>"
																							+ d.mobileTips
																							+ "</span>");
																	loginNameRepeat = true;
																} else {
																	$(
																			"#Message")
																			.html(
																					"");
																	loginNameRepeat = false;
																}
															}
														});
											}
										});

					});
</script>

</html>
